<section class="app-page user-select-none">
  <header class="header">
    <div class="header-top">
      <img [src]="LOGO_CDN" class="logo" alt="logo">
      <div class="open" [class.active]="open" (click)="handleToggleOpen()">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <nav class="nav-open">
      <div 
        *ngFor="let item of websiteList; let i = index;" 
        (click)="handleCilckNav(i)" 
        [class.active]="page === i" 
        class="nav-title"
      >
        {{ item.title }}
      </div>
    </nav>
  </header>
  
  <div class="wrapper">
    <nav class="children-nav" *ngIf="websiteList[page].nav.length > 1">
      <a
        class="tag" 
        *ngFor="let item of websiteList[page].nav; let i = index" 
        [class.active]="id === i" 
        (click)="handleSidebarNav(i)"
      >
        {{ item.title }}
      </a>
    </nav>
    <ul>
      <li *ngFor="let item of websiteList[page].nav[id].nav">
        <h2 class="block-title" *ngIf="item.title">
          {{ item.title }} x {{ item.nav.length }}
        </h2>
        <div class="row">
          <div class="item-list" *ngFor="let el of item.nav; index as i;">
            <a [href]="el.url" target="_blank">
              <div class="top">
                <app-logo
                  [src]="el.icon"
                  [name]="el.name"
                  [size]="30"
                >
                </app-logo>
                <em class="name" [title]="el.name">{{ el.name }}</em>
              </div>
              <pre class="desc" [title]="el.desc">{{ el.desc }}</pre>
            </a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>
